<template>
      <aside class="col-md-3">
        <a class="banner" href=""><img src="../assets/img/huasen.png" alt=""></a>
        <div class="hot">
          <div class="user_group">
            <div class="btn-group">
              <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span>{{getLoginStatus}}</span>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu login_group">
                <!--添加登录弹框类-->
                <li data-toggle="modal" data-target=".bs-example-modal-lg" v-show="!this.$store.state.user.uname"><p>登录</p></li>
                <li @click="cancelUser()"><p>注销</p></li>
                <li><p>个人中心</p></li>
              </ul>
            </div>
          </div>
          <p class="text-primary">花森演示网站</p>
          <p>森林覆盖的岛屿花开遍地</p>
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search for...">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">搜索</button>
              </span>
            </div>
          <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">
                <SignUp></SignUp>
              </div>
            </div>
          </div>
        </div>
      </aside>
</template>

<script>
    import SignUp from '../components/SignUp'
    export default {
      name: "RightSide",
      components: {
          SignUp
      },
      computed: {
        getLoginStatus() {
          return this.$store.state.user.uname ? this.$store.state.user.uname : "未登录";
        }
      },
      methods: {
        cancelUser() {
          this.$store.commit("cancelUser");
          this.$message({
            message: '成功退出账号',
            type: 'success'
          });
        }
      }
    }
</script>

<style scoped>
  .banner {
    position: relative;
  }
  .banner img {
    margin-top: 8px;
    width: 100%;
    /*max-width: 100%;*/
    background-color: orange;
  }
  .hot {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #dddddd;
  }
  .user_group {
    margin-bottom: 10px;
  }
  .login_group {
    padding: 8px;
    font-size: 14px;
  }


</style>
